<template>
    <div class="orderlist">
        <van-sticky>
            <van-tabs v-model="active" @change='changeTabs'>
                <van-tab name="0" title="全部"></van-tab>
                <van-tab name="1" title="待付款"></van-tab>
                <van-tab name="2" title="待发货"></van-tab>
                <van-tab name="6" title="待收货"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="content"> 
                <van-skeleton title :row="3" :loading="loading">
                    <div class="goods" v-if="list.length>0">
                        <div class="item" v-for="(item,index) of list" :key="item.order_code">
                           <div v-for="(it,i) in item.guageList" :key="it.id">
                                <van-card 
                                    :price="it.price" 
                                    :title="it.order_code" 
                                    :desc="it.name" 
                                    :thumb="it.url" 
                                    :num="it.order_num"
                                    @click="goodsClick(index)"
                                >
                                    <template #tags v-if="item.guageList.length-1 === i">
                                        <van-tag plain type="danger" v-if="item.payment_status == 1">待付款</van-tag>
                                        <van-tag plain type="danger" v-if="item.payment_status == 2 && item.guageList[0].shipping_status == 2">待发货</van-tag>
                                        <van-tag plain type="danger" v-if="item.payment_status == 4">已完成</van-tag>
                                        <van-tag plain type="danger" v-if="item.payment_status == 5">退货中</van-tag>
                                        <van-tag plain type="danger" v-if="item.payment_status == 6">待收货</van-tag>
                                    </template>
                                    <template #footer v-if="item.guageList.length-1 === i">
                                        <div class="btn" @click.stop="">
                                            <van-button @click="pay(index)" v-if="item.payment_status == 1" color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">立即支付</van-button>
                                        </div>
                                    </template>
                                </van-card>
                           </div>
                        </div>
                    </div>
                    
                    <van-empty description="暂无该订单" v-else>
                        <van-button round type="danger" class="bottom-button" @click="goBuy">
                            去下单
                        </van-button>
                    </van-empty>
                </van-skeleton>
            </div>
            
        </van-pull-refresh>
        
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    data(){
        return{
            list:[],
            active:'0',
            isLoading: false,
            loading:false,
        }
    },
    computed: {
        ...mapState(["openid", "userState"]),
        apiUrl() {
            if (this.active == 0) {
                return this.userState == 0 ? this.$api.merchantUser: this.$api.platformUser;
            } else {
                return this.userState == 0? this.$api.merchantStatus: this.$api.platformStatus;
            }
        },
        orderState() {
            let obj = {};
            switch (this.active) {
                case "1":
                    obj.payment_status = 1;
                    break;
                case "2":
                    obj.shipping_status = 2;
                    obj.payment_status = 2;
                    break;
                case "6":
                    obj.shipping_status = 6;
                    break;
                case "3":
                    obj.payment_status = 3;
            }
            return obj;
        },
    },
    mounted(){
        this.active = this.$route.params.id
        this.getlist()
    },
    methods:{
        //去购买
        goBuy(){
            this.$router.push('/')
        },
        //点击商品
        goodsClick(e){
            console.log(this.list[e])
            let data = {
                id: this.list[e].guageList[0].id,
                order_code:this.list[e].guageList[0].order_code,
                subtotal:this.list[e].subtotal,
                uid: this.list[e].uid,
                mid: this.list[e].mid,
                num: this.list[e].guageList[0].order_num,
                payment_status: this.list[e].guageList[0].payment_status,
                shipping_status: this.list[e].guageList[0].shipping_status,
                out_order: this.list[e].out_order,
                orderNo: this.list[e].orderNo,
                number: this.list[e].number,
                com: this.list[e].com,
                create_at: this.list[e].create_at,
                confirm_endtime: this.list[e].confirm_endtime,
                not_endtime: this.list[e].not_endtime,
                pay_date: this.list[e].pay_date,
                update_at: this.list[e].update_at,
                payment_endtime: this.list[e].payment_endtime,
            }
            this.$store.commit('payOrder', data)
            this.$router.push({ path: `/center/orderlist/orderDetail/${this.list[e].order_code}` })
        },
        //点击立即支付
        pay(e){
            console.log(this.list[e])
            let data = {
                id: this.list[e].guageList[0].id,
                order_code:this.list[e].guageList[0].order_code,
                subtotal: this.list[e].subtotal,
                uid: this.list[e].uid,
                mid: this.list[e].mid,
                num: this.list[e].guageList[0].order_num,
                payment_status: this.list[e].guageList[0].payment_status,
                shipping_status: this.list[e].guageList[0].shipping_status,
                out_order: this.list[e].out_order,
                orderNo: this.list[e].orderNo,
                number: this.list[e].number,
                com: this.list[e].com,
                create_at: this.list[e].create_at,
                confirm_endtime: this.list[e].confirm_endtime,
                not_endtime: this.list[e].not_endtime,
                pay_date: this.list[e].pay_date,
                update_at: this.list[e].update_at,
                payment_endtime: this.list[e].payment_endtime,
            }
            this.$store.commit('payOrder', data)
            this.$router.push('/payment')
        },
        //切换
        changeTabs(name,title){
            console.log(name,title,'this.active-------',this.active)
            this.getlist()
        },
        //下拉刷新
        onRefresh() {
            this.getlist()
            this.isLoading = false
        },
        async getlist(e){
            this.loading = true
            let { data: { code, data },} = await this.$http.get(
            this.apiUrl,
            {
                openid: this.openid, 
                ...this.orderState,
            });
            this.loading = false
            console.log(this.apiUrl,code,data,this.$store.state.userState)

            if (code === 0) {
                this.list = data.subtotal.map((item, index) => {
                    item.guageList = data.items[index];
                    return item;
                });
                console.log('this.list------------',this.list)
            } else {
                this.list = [];
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .orderlist{
        .content{
            padding-top: 1rem;
            min-height: calc(100vh - 44px);
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
            }
            .goods{
                .item{
                    margin-bottom: 1rem;
                }
            }
        }
    }
</style>